<template>
  <div class="vueUse">
    <div class="itemWrap">
      <h1>测试 vueUse 的鼠标坐标</h1>
      <h3>Mouse: {{ x }} x {{ y }}</h3>
    </div>
    <div class="itemWrap">
      <div>Count: {{ count }}</div>
      <button @click="pause">pause</button>
      <button @click="resume">resume</button>
    </div>
    <div class="itemWrap">
      <p>Showing {{ isEven ? 'even' : 'odd' }} items</p>
      <button @click="toggle">Toggle Even/Odd</button>
      <div v-bind="containerProps" style="height: 300px">
        <div v-bind="wrapperProps">
          <div v-for="item in list" :key="item.index" style="height: 22px">Row: {{ item.data }}</div>
        </div>
      </div>
    </div>
    <div class="itemWrap">当前时间是：{{ formatted }}</div>
  </div>
</template>

<script setup lang="ts">
  import { ref, unref, reactive, onMounted, computed } from 'vue'
  import { useMouse, useRafFn, useVirtualList, useToggle, useNow, useDateFormat } from '@vueuse/core'

  // 移动鼠标坐标
  const { x, y } = useMouse()

  // 暂停/恢复
  const count = ref(0)
  const { pause, resume } = useRafFn(() => (count.value += 1))

  //   实现简单虚拟列表
  const [isEven, toggle] = useToggle()
  const allItems = Array.from(Array(99999).keys())
  const filteredList = computed(() => allItems.filter(i => (isEven.value ? i % 2 === 0 : i % 2 === 1)))
  const { list, containerProps, wrapperProps } = useVirtualList(filteredList, {
    itemHeight: 22
  })

  //   当前时间格式化
  const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss')
</script>

<style lang="less" scoped>
  .itemWrap {
    margin: 20px 0;
  }
</style>
